<template>
  <div class="category">
    <van-search v-model="keywords" placeholder="请输入搜索关键词" @keydown.enter="searchHandel" />
    <div class="left-tarbar">
      <van-sidebar v-model="activeIndex" v-if="category != null">
        <van-sidebar-item
          :title="item.category_name"
          v-for="(item, index) in category"
          :key="item.block_id"
          @click="changeActive(index)"
        />
      </van-sidebar>
    </div>
    <div class="content">
      <div class="content-goods" v-if="category != null">
        <div class="top-img">
          <img
            class="auto-img"
            :src="categoTopImg[0].body.items[0].img_url"
            alt=""
          />
        </div>
        <div class="top-nav-title">
          <div class="nav-list-wrap">
            <div
              class="nav-list"
              :class="{ active: navActiveIndex == index }"
              v-for="(item, index) in categoryTitle"
              :key="index"
              @click="navActive(index)"
            >
              <div class="nav-list-title">
                {{ item.body.category_name }}
              </div>
            </div>
          </div>
        </div>
        <div class="m-title" v-for="(item, index) in categoryTitle">
          <div class="goods-title">{{ item.body.category_name }}</div>
          <div class="goods-wrap">
            <div
              class="goods-list"
              v-for="(item2, index2) in categoryList"
              :key="index2"
            >
              <div
                class="goods-list-item-wrap"
                v-if="item.body.category_name == item2.body.title"
              >
                <div
                  class="goods-list-item"
                  v-for="(item3, index3) in item2.body.product_list||item2.body.items"
                  :key="item3.product_id"
                  @click="goToGoodsDetail({ id: 15694, router: $router })"
                >
                  <div class="img-box">
                    <img class="auto-img" :src="item3.puzzle_url||item3.img_url" alt="" />
                  </div>
                  <div class="text-box">
                    <div class="goods-name">{{ item3.name||item3.product_name }}</div>
                    <div class="goods-price">
                      <span>¥</span>{{ item3.price||114514 }} <span>起</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCategory } from "@/api/category";
import { mapMutations } from "vuex";
export default {
  name: "CategoryView",
  data() {
    return {
      //搜索关键词
      keywords: "",
      //侧边导航栏激活下标
      activeIndex: 1,
      //分类数据
      category: null,
      //顶部图片
      categoTopImg: null,
      //标题
      categoryTitle: null,
      //商品列表
      categoryList: null,
      //顶部标题激活下标
      navActiveIndex: 0,
    };
  },
  activated() {
    this.getCategoryData();
  },
  methods: {
    ...mapMutations(["goToGoodsDetail"]),
    //获取数据
    getCategoryData() {
      getCategory({ axios: this.axios }).then((res) => {
        // console.log(res.data.data);
        this.category = res.data.data;
        if (res.data.data[this.activeIndex].category_list) {
          this.categoTopImg = res.data.data[
            this.activeIndex
          ].category_list.filter((item) => {
            return item.view_type == "cells_auto_fill";
          });
          this.categoryTitle = res.data.data[
            this.activeIndex
          ].category_list.filter((item) => {
            return item.view_type == "category_title";
          });
          this.categoryList = res.data.data[
            this.activeIndex
          ].category_list.filter((item) => {
            return item.view_type == "category_group";
          });
          // console.log(this.categoryList);
        }else {
          this.$toast('当前分类没有任何数据')
        }
      });
    },
    //商品标题切换
    changeActive(index) {
      if (this.activeIndex == index) {
        return;
      }
      this.activeIndex = index;
      this.getCategoryData();
    },
    //侧边导航栏切换
    navActive(index) {
      if (this.navActiveIndex == index) {
        return;
      }
      this.navActiveIndex = index;
    },
    //搜索方法
    searchHandel() {
      this.$router.push({name:'SearchView',query:{keywords:this.keywords}})
    },
  },
};
</script>

<style lang="scss" scoped>
.category {
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  ::v-deep .van-search {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 110;
    .van-search__content--square {
      border-radius: 999px;
    }
  }
  .left-tarbar {
    width: 90px;
    height: 100vh;
    overflow: auto;
    position: absolute;
    top: 0;
    left: 0;
    margin-bottom: 50px;
  }
  .content {
    padding: 60px 10px 50px 100px;
    .content-goods {
      .top-img {
        width: 265px;
      }
    }
    .top-nav-title {
      overflow-x: scroll;
      width: 265px;
      margin-top: 15px;
      border-bottom: 1px solid #ddd;
      .nav-list-wrap {
        width: 1600px;
        display: flex;
        .nav-list {
          flex: 0 0 1;
          margin-right: 20px;
          padding: 4px;
          border-radius: 2px;
          &.active {
            background-color: #eee;
          }
        }
      }
    }
    .m-title {
      .goods-title {
        font-weight: 600;
        font-size: 16px;
        margin: 20px 0 5px;
        text-align: left;
      }
      .goods-wrap {
        .goods-list {
          .goods-list-item-wrap {
            .goods-list-item {
              display: flex;
              align-items: center;
              .img-box {
                width: 88px;
                height: 88px;
                overflow: hidden;
              }
              .text-box {
                font-size: 15px;
                text-align: left;
                .goods-name {
                  margin-bottom: 10px;
                }
                .goods-price {
                  span {
                    font-size: 12px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  ::v-deep .van-sidebar {
    width: 90px;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 50px;
    bottom: 50px;
    .van-sidebar-item__text {
      font-size: 12px;
    }
  }
}
</style>